<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<link rel="icon" href="img/favicon.ico">
    <title>歌单</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet"/>
	
	<meta name="keywords" content="音乐，牟云音乐，网易云音乐，音乐馆，歌单，排行榜，歌手，免费下载，在线音乐，免费音乐,音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，music.superboyjack.cn">
	<meta name="description" content="牟云音乐是一个音乐爱好者推出的一款网络音乐服务产品，海量音乐在线试听、新歌热歌在线首发、歌词翻译、手机铃声下载、高品质无损音乐试听、海量无损曲库、正版音乐下载、、MV观看等，是互联网音乐播放和下载的优选。">
	<!-- 百度统计 -->
	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "https://hm.baidu.com/hm.js?58f4b4a2c99429764a9757416df9e31f";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>

  </head>
  <body>
	
	<!-- 引入导航栏 -->
	<div class="mod_header">
	    <div class="section_inner">
	        <h1 class="qqmusic_title"><a href="index.html"><img src="img/musiclogo.png" alt="牟云音乐" class="music_logo"></a></h1>
	        <!-- 导航 S -->
	        <ul class="mod_top_nav" role="nav">
	            <li class="top_nav__item">
	                <a href="index.html" class="top_nav__link top_nav__link--current" title="音乐馆">音乐馆</a>
	            </li>
	            <li class="top_nav__item">
	                <a href="playlists.html" class="top_nav__link" title="歌单">歌单</a>
	            </li>
				<li class="top_nav__item">
				    <a href="index.html#ranking" class="top_nav__link" title="排行榜">排行榜</a>
				</li>
				<li class="top_nav__item">
				    <a href="singers.html" class="top_nav__link" title="歌手">歌手</a>
				</li>
	        </ul>
		</div>
	</div>
	<!-- 加载动画 -->
	<div class='miaov_head' id="loading">
	   <iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="loading.html" width="100%"  height="520px">
	  </iframe>
	</div>
	<div id="list" class="container hidden" v-cloak>
		<div class="row mod_data">
		  <div class="col-md-4 data__cover">
			  <img id="img" class="img-responsive data__photo" :src="coverImgUrl + '?param=400y400'"  crossorigin="anonymous" />
		  </div>
		<div class="col-md-4 data__cont">
			<div class="row data__row">
				<h2 >{{ name }}</h2>
			</div>
			<div class="row data__row">
				<h4 >标签:
				<span v-for="tag in tags" class="label label-info">
					<a href="#">
						{{ tag }} &nbsp;
					</a>
				</span> 
				</h4>
			</div>
			<div class="row data__row ">
				<span >播放量: <span class="web-font">{{ playCount }}</span></span>
			</div>
			<div class="row data__row">
				<span >歌曲数: <span class="web-font">{{ trackCount }}</span> </span>
			</div>
				<div class="data_play__all">
					<a class="a_play_all" :href="toAllSongPage(id)" >
						<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
						播放全部
					</a>
				</div>
		</div>
		  <div class="col-md-4"></div>
		</div>
		<div class="row">
			<div class="col-sm-9">
				<table class="table table-hover"> 
					<thead> 
						<tr> 
							<td></td>
							<td>歌曲</td>
							<td>歌手</td>
							<td>专辑</td>
							<td>时长</td>
							<td>学习</td> 
						</tr> 
					</thead > 
					<tbody > 
						
						<tr v-for="(song,index) in songs"> 
							<td><span >{{ index+1 }}</span></td> 
							<td>
								<a :href="toSongPage(song.id)" target="_blank">
									<span >{{ song.name }}</span>
									<span v-if="song.alia.length>0" > ({{ song.alia[0] }})</span>
								</a>
							</td> 
							<td> 
								<!-- 遍历出歌手 -->
								<span v-for="(singer,index) in song.ar" >
									<a :href="toSingerPage(singer.id)" target="_blank">
										{{ singer.name }}
									</a>
									
									<!-- 判断是否加入分隔符 -->
									<span v-if="index < song.ar.length-1">/</span>
								</span>
								
							</td>
							 <td><a :href="toAlbumPage(song.al.id)" target="_blank">{{ song.al.name }}</a></td>
							 <td><span >{{ song.dt }}</span></td>
							<!-- 学习模块 -->
							<td>
								<a href="javascript:;" :data-id="song.id" :data-name="song.name + ' - ' + song.ar[0].name" onclick="downlode(this)" download>
									<svg t="1575511417195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1474" width="32" height="32"><path d="M551.783587 591.158874 551.783587 249.237481 472.216413 249.237481 472.216413 591.160921 336.806397 455.740672 280.542976 512.00921 511.995395 743.448326 743.454978 512.00921 687.192579 455.740672Z" p-id="1475"></path><path d="M982.400045 313.280076c-25.713638-60.794621-62.521962-115.3921-109.403712-162.27385-46.880727-46.879704-101.477182-83.691097-162.272827-109.403712-62.950727-26.626427-129.811508-40.126906-198.727087-40.126906-68.915579 0-135.778406 13.500479-198.72811 40.126906-60.794621 25.712615-115.390054 62.524009-162.269757 109.403712-46.879704 46.88175-83.687004 101.479229-109.400642 162.27385-26.624381 62.951751-40.123836 129.813554-40.123836 198.727087 0 68.915579 13.499455 135.77636 40.123836 198.72504 25.713638 60.794621 62.520939 115.390054 109.400642 162.269757 46.879704 46.87868 101.475136 83.687004 162.269757 109.399619 62.949704 26.624381 129.811508 40.122813 198.72811 40.122813s135.777383-13.498432 198.727087-40.122813c60.795645-25.712615 115.3921-62.521962 162.272827-109.399619 46.880727-46.879704 83.689051-101.475136 109.403712-162.269757 26.625404-62.949704 40.124859-129.810484 40.124859-198.72504C1022.525927 443.093631 1009.025449 376.230804 982.400045 313.280076zM679.751097 909.096017c-53.122895 22.468734-109.563348 33.861202-167.754678 33.861202-58.182121 0-114.617457-11.392468-167.738305-33.861202-51.316759-21.703301-97.407494-52.780087-136.993071-92.363617-39.585577-39.58353-70.663386-85.672218-92.368734-136.986931-22.470781-53.119825-33.864272-109.556185-33.864272-167.738305 0-58.18826 11.394515-114.63076 33.864272-167.754678 21.705348-51.316759 52.783157-97.40954 92.368734-136.995117 39.584554-39.58353 85.675288-70.660316 136.992047-92.365664 53.120848-22.468734 109.556185-33.861202 167.738305-33.861202 58.19133 0 114.631784 11.392468 167.754678 33.861202 51.316759 21.705348 97.40647 52.782134 136.988977 92.365664s70.656223 85.676311 92.360548 136.995117c22.466688 53.121871 33.858132 109.563348 33.858132 167.754678 0 58.184167-11.391445 114.620527-33.858132 167.738305-21.704324 51.316759-52.77804 97.40647-92.359524 136.986931C777.157567 856.314906 731.067856 887.392716 679.751097 909.096017z" p-id="1476"></path></svg>
								</a>
							</td>
						</tr>
						
					</tbody> 
				 </table> 
			</div>
			<div class="col-md-3">
				<h3>歌单简介</h3>
				<p class="web-font">
					{{ description }}
				</p>
			</div>
		</div>
	</div>
	
	<footer class="footer">
	    <div class="container">	
			<div style="text-decoration:none; text-align:center; padding:20px 0;">
				<div style="width:600px;margin:0 auto; padding:20px 0;">
					<p style="margin:10px 0px;">
					<b>Copyright © 2019
					<a href="https://superBoyJack.cn" target="_blank" title="superBoyJack"> superBoyJack</a> 版权所有 Powered By 
					<a href="http://wpa.qq.com/msgrd?uin=2656288235" target="_blank" title="superBoyJack">superBoyJack</a> Design.&nbsp;&nbsp;
					</b>
					<!-- 备案信息代码 -->
					</p>
					<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41152502000110" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
						<img src="https://superboyjack.cn/upload/2019/11/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87-b8473f72b5dc4bf1885d394815c38a9a.png" style="float:left;"/>
						<p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">
						豫公网安备 41152502000110号 豫ICP备19039675号
						</p>
					</a>
				</div>
			</div>
		</div>
	</footer>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/jquery.base64.js"></script>
	<script src="js/download.js"></script>
	
	<script src="js/color-thief.umd.js"></script>
  </body>
  <script>
	  var title;
	  var idString = '';
	  
	  
		//接收一个值
		function oneValues(){
			var result;
			var errors = ['404.html','505.html'];
			var url=(window.location.search); //获取url中"?"符后的字串
			try{
				var decodeUrl = $.base64.decode(url.substring(1));
			}catch(e){
				window.location.href=errors[Math.floor(Math.random() * errors.length)];
			}
			if(url.indexOf("?")!=-1){
				result = decodeUrl.substr(decodeUrl.indexOf("=")+1);
			}
			return result;
		}
		
		//接收多值
		function manyValues(){
			var url=window.location.search;
			if(url.indexOf("?")!=-1){
				var str = url.substr(1);
				strs = str.split("&"); 
				var key=new Array(strs.length);
				var value=new Array(strs.length);
				for(i=0;i<strs.length;i++){
					key[i]=strs[i].split("=")[0]
					value[i]=unescape(strs[i].split("=")[1]); 
					alert(key[i]+"="+value[i]);
				} 
			} 
		}
		// 格式化播放次数
		function formatPlayCount(count){
			if(count >= 100000)
				return (count/10000).toFixed(2) + "万";
			else
				return count;
		}
		// 格式化音乐时长
		function formatDuraton(time){
			if(time > -1){
				var temp;
				var sec = Math.floor(time/1000);
				//var min = Math.floor(time/60) % 60;
				var min = Math.floor(sec/60);
				sec = sec - min*60;
				if(min < 10){
					temp = "0" + min + ":";
				}else
					temp = min + ":";
				if(sec < 10){
					temp += "0" + sec ;
				}else
					temp += sec ;
			}
			return temp;
		};
	 
	  var playlistVue = new Vue({
	  			el: '#list',
	  
	  			data: {
					showloading: true,
	  				id: oneValues(),
	  				coverImgUrl: '',
	  				name: '',
	  				playCount: '',
					trackCount: '',
					description: '',
					singer: {
						id: '',
						name: ''
					},
					song: {
						id:'',//歌曲id
						name: '',//歌名
						ar: [],//歌手数组
						alia: [],//别名
						al: {},//专辑
						dt: '',//时长
						
					},
	  				idLists: [
	  						
	  				],
					songs: [
							
					],
					tags: [
						
					],
					
	  			},
				methods: {
					// 传送至相应的歌手详情页面
					toSingerPage: function (id) {
						return 'singer.html?' +$.base64.encode('id=' + id);
					},
					toAllSongPage: function (id) {
						return 'player.html?' +$.base64.encode('id=' + id + '&type=playlist');
					},
					toSongPage: function (id) {
						return 'player.html?' +$.base64.encode('id=' + id + '&type=song');
					},
					//传送至相应的专辑详情页面
					toAlbumPage: function (id) {
						return 'album.html?' +$.base64.encode('id=' + id);
					},
				  }
	  });
	  $.getJSON(
	      "https://api.music.superboyjack.cn/playlist/detail?id=" + oneValues(),
			function(data) {
				if(data.code == 200){
					playlistVue.coverImgUrl = data.playlist.coverImgUrl.replace('http','https');//歌单图片
					playlistVue.name = data.playlist.name;//歌单名
					playlistVue.playCount = formatPlayCount(data.playlist.playCount);//歌单播放次数
					playlistVue.trackCount = data.playlist.trackCount;//歌单歌曲数量
					playlistVue.description = data.playlist.description;//歌单描述
					for(var i=0;i<data.playlist.tags.length;i++){
						playlistVue.tags.push(data.playlist.tags[i]);//歌单标签
					}
					for(var i=0;i<data.playlist.trackIds.length;i++){
						// 向推荐歌单数组里遍历添加歌单
						playlistVue.idLists.push(
							data.playlist.trackIds[i].id
							);
						// 将歌曲的id拼装成接口参数字符串
						if(i<data.playlist.trackIds.length-1)
							idString += playlistVue.idLists[i] + ",";
						else
							idString += playlistVue.idLists[i];
					}
					document.title = playlistVue.name;
					$.getJSON(
							"https://api.music.superboyjack.cn/song/detail?ids="+ idString,
							function(data) {
								console.log(data);
								for(var j=0;j<data.songs.length;j++){
									playlistVue.songs.push({
										id:data.songs[j].id, //歌曲id
										name:data.songs[j].name, //歌曲名
										ar: data.songs[j].ar, //歌手
										alia:data.songs[j].alia, //别名
										al: data.songs[j].al, //专辑
										dt: formatDuraton(data.songs[j].dt), //时长
									});
								}
							}
					);
					document.getElementById("loading").setAttribute("class","miaov_head hidden");
					$("div#list").removeClass("hidden");
					
					const colorThief = new ColorThief();
					const img = document.querySelector('#img');
				
					// Make sure image is finished loading
					if (img.complete) {
						console.log(colorThief.getColor(img));
					} else {
						img.addEventListener('load', function() {
							console.log(colorThief.getColor(img));
						// colorThief.getColor(img);
						});
					}
				}
	      }
	  );
	
	function downlode(obj){
		var success = '<svg t="1575529909134" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http:\/\/www.w3.org\/2000\/svg" p-id="1438" width="32" height="32"><path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m-74.965333 550.4L346.453333 545.152a42.666667 42.666667 0 1 0-60.330666 60.330667l120.704 120.704a42.666667 42.666667 0 0 0 60.330666 0l301.653334-301.696a42.666667 42.666667 0 1 0-60.288-60.330667l-271.530667 271.488z" fill="#52C41A" p-id="1439"><\/path><\/svg>';
		// 获取音乐URL
		$.getJSON(
				  "https://api.music.superboyjack.cn/song/url?id=" + obj.dataset.id,
				  function(data) {
					  if(data.code == 200){
						if(data.data[0].url != null){
							//下载模块
							var x=new XMLHttpRequest();
							x.open("GET", data.data[0].url.replace('http','https'), true);
							x.responseType = 'blob';
							x.onload=function(e){download(x.response, obj.dataset.name + ".mp3" , "audio/mp3" ); }
							x.send();
							obj.innerHTML = success;
						}else
							alert("当前歌曲无版权");
					  }
				  }
		);
	}
	
	
  </script>
</html>